<template>
  <div class="thread-container">
    <div
      class="thread-body"
      @click="jumpDetail(item,'')"
    >
      <div class="left">
        <div class="header-img">
          <img
            :src="item.avatarUrl || require('@/assets/img/custom/placeholder-header-img.png')"
            class="agent-userImg"
          >
        </div>
        <div class="content">
          <h3 class='name ellipsis'>{{item.clientName}}</h3>
          <p>{{item.sourceType === 1 ? '来自名片分享' : item.sourceType === 2 ? '来自楼盘分享' : item.sourceType === 3 ? '来自文章分享' : '来自系统分配'}}</p>
          <p>{{item.updateTime | dateTimeFormatter('','/')}}</p>
          <p>访问次数：{{item.clickCount}}</p>
        </div>
      </div>
      <div class="right">
        <p
          class='precent'
          :style="{color: item.intentionality >70 ? '#007AE6' : '#007AE6'}"
        >{{item.intentionality || 15}}<span>%</span></p>
        <p class='txt'>意向度</p>
      </div>
    </div>
    <div class="footer">
      <div
        class="btn-item"
        @click="changeCustomStatus(item)"
      >
        <img
          :src="item.clientStrangerFlag === 1 ? require('@/assets/img/dynamics/shield-active.png') : require('@/assets/img/dynamics/shield-default.png')"
          alt=""
        >
        <p :class='{cancel: item.clientStrangerFlag === 1}'>{{item.clientStrangerFlag === 1 ? '取消屏蔽' : '屏蔽此人'}}</p>
      </div>
      <div
        class="btn-item"
        @click="contact(item)"
      >
        <img
          src="@/assets/img/dynamics/contact.png"
          alt=""
        >
        <p>发送消息</p>
      </div>
      <div
        class="btn-item"
        @click="setCustomer"
      >
        <img
          src="@/assets/img/dynamics/add-customer-active.png"
          alt=""
        >
        <p class='add-customer'>置为客户</p>
      </div>
    </div>
  </div>
</template>
<script>
import CustomService from 'SERVICE/customService'
export default {
  props: {
    item: {
      type: Object,
    },
    index: {
      type: Number
    }
  },
  data () {
    return {}
  },
  methods: {
    /**
     * 跳转到客户详情
     */
    jumpDetail (item, type) {
      this.$router.push({ path: `/custom/${item.clientId}`, query: { thread: 'thread', activeIndex: 1, threadStatus: item.clientStrangerFlag || 0, clickIndex: this.index, isSetCustomer: type, type: this.type } })
    },

    /**
     * 置为客户
     */
    setCustomer () {
      this.$dialog.confirm({
        title: '确定将该访客置为意向客户？',
        messageAlign: 'left',
        confirmButtonText: '确定',
        confirmButtonColor: "#EA4D2E",
        cancelButtonText: '取消',
        cancelButtonColor: "#007AE6"
      }).then(() => {
        this.setIntentionCustomer()
      }).catch((error) => { console.log(error) })
    },

    /**
     * 置为意向客户
     */
    async setIntentionCustomer(){
      try {
        await CustomService.updateCustomerInfo({ clientId: this.item.clientId, clientStrangerFlag: 2 })
        this.$parent.$parent.list = []
        this.$parent.$parent.loading = false
        this.$parent.$parent.finished = false
        this.$parent.$parent.current = 1
        this.$parent.$parent.isShow = false
        this.$parent.$parent.total = this.$parent.$parent.total -1 
        document.title = `访客(${this.$parent.$parent.total})`
        sessionStorage.setItem('threadTotal', (sessionStorage.getItem('threadTotal') > 0 ? sessionStorage.getItem('threadTotal') - 1 : 0))
        setTimeout(() => { this.$parent.$parent.isShow = true}, 50);
      } catch (e) {
        console.log(e)
      }
    },

    /**
     * 屏蔽和取消屏蔽
     */
    changeCustomStatus (item) {
      if (item.clientStrangerFlag) {
        this.updateInfo({ clientId: item.clientId, clientStrangerFlag: 0 }, 1)
      } else {
        this.$dialog.confirm({
          title: '屏蔽该访客？',
          message: '屏蔽后，系统将不在推送该访客的消息和线索；可在访客详情中取消屏蔽',
          confirmButtonText: '屏蔽',
          confirmButtonColor: "#EA4D2E",
          cancelButtonText: '取消',
          cancelButtonColor: "#007AE6"
        }).then(() => {
          this.updateInfo({ clientId: item.clientId, clientStrangerFlag: 1 }, 0)
        }).catch((error) => { console.log(error) })
      }
    },

    /**
     * 更新客户状态信息
     */
    async updateInfo (params, clientStrangerFlag) {
      try {
        await CustomService.updateCustomerInfo(params)
        this.$parent.$parent.list = this.$parent.$parent.list.map((val, key) => ({ ...val, clientStrangerFlag: key === this.index ? (val.clientStrangerFlag === 1 ? 0 : 1) : val.clientStrangerFlag }))
        !clientStrangerFlag && this.$toast(`您已屏蔽访客“${this.item.clientName}”`)
      } catch (error) {
        console.log(error)
      }
    },

    /**
     * 联系
     */
    contact (item) {
      this.$router.push({
        name: "message",
        query: {
          clientId: item.clientId
        }
      })
    }
  }
}
</script>
<style lang="less">
.thread-container {
  background: #fff;
  height: 158px;
  box-sizing: border-box;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: 500;
  margin-top: 12px;
  .thread-body {
    color: rgba(156, 165, 181, 1);
    padding: 16px 21px 16px 16px;
    display: flex;
    justify-content: space-between;
    box-shadow: inset 0px -1px 1px -1px #E4E6F0;
    .left {
      display: flex;
      flex: 1;
      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 12px;
        margin-top: 2px;
      }
      .name {
        font-size: 18px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        height: 26px;
        line-height: 26px;
        max-width: 200px;
      }
      p {
        height: 16px;
        line-height: 16px;
        margin-top: 4px;
      }
    }
    .right {
      text-align: center;
      margin-left: 25px;
      .precent {
        font-size: 32px;
        font-family: DINCondensed-Bold;
        font-weight: bold;
        color: rgba(0, 122, 230, 1);
        span {
          font-size: 18px;
        }
      }
      .txt {
        font-family: PingFangSC-;
        font-weight: 400;
        color: #9CA5B5;
        margin-top: -3px;
      }
    }
  }
  .footer {
    padding: 12px 44px 12px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-item {
      display: flex;
      align-items: center;
      height: 16px;
      line-height: 16px;
      color: rgba(133, 145, 166, 1);
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
      .cancel {
        color: rgba(230, 94, 46, 1);
      }
      .add-customer {
        color: rgba(0, 122, 230, 1);
      }
    }
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.van-dialog__header {
  color: #333;
  font-family: PingFangSC;
  font-weight: 500;
}
.van-dialog__message{
  font-family: PingFangSC;
  font-weight: 400;
  color: #333;
}
.van-dialog__cancel span {
  color: #007ae6;
}
.van-dialog__confirm span {
  color: #ea4d2e;
}
</style>
